<template>
  <div>
    <div class="radio">
      <span>记录： </span>
      <el-radio
        v-model="radio"
        :disabled="checked"
        label="1"
        @input="clickHandle"
        >正确</el-radio
      >
      <el-radio
        v-model="radio"
        :disabled="checked"
        label="2"
        @input="clickHandle"
        >错误</el-radio
      >
      <el-radio
        v-model="radio"
        :disabled="checked"
        label="3"
        @input="clickHandle"
        >部分错误</el-radio
      >
    </div>
    <textarea
      placeholder="请输入错误部分内容"
      v-if="radio == '3'"
      cols="40"
      rows="3"
      :disabled="checked"
      v-model="textareaValue"
      @blur="blurHandle"
      @focus="changeHandle2"
    ></textarea>
    <!-- <div class="shadowErea" v-if="showTextarea">
      <textarea
        placeholder="请输入错误部分内容"
        cols="100"
        rows="14"
        :disabled="checked"
        v-model="textareaValue"
        @blur="blurHandle"
      ></textarea>
      <div class="ready" @click="keeprecord">确定</div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "",
      result: "",
      textareaValue: "",

      record1: "",
      record2: "",
      record3: "",
      record4: "",
      record5: "",
      record6: "",
      record7: "",
      record8: "",
      record9: "",
      record10: "",
      record11: "",
      showTextarea: false,
    };
  },
  props: {
    questionNum: {
      type: Number,
    },
    checked: {
      type: Boolean,
    },
    status: {
      type: String,
    },
    radioStatus: {
      type: String,
    },
  },
  created() {
    if (this.status == "2") {
      switch (this.radioStatus) {
        case "正确":
          this.radio = "1";
          break;
        case "错误":
          this.radio = "2";
          break;
        case "部分错误":
          this.radio = "3";
          break;
      }
      if (
        this.radioStatus !== null &&
        this.radioStatus !== "正确" &&
        this.radioStatus !== "错误"
      ) {
        this.radio = "3";
      }
    }
    if (
      this.radioStatus !== "正确" &&
      this.radioStatus !== "错误" &&
      this.radioStatus !== "部分错误"
    ) {
      this.textareaValue = this.radioStatus;
    }
  },
  methods: {
    clickHandle(e) {
      this.classType();
      this.$emit("getScoreState", this.result, this.questionNum, this.radio);
      switch (this.questionNum) {
        case 1:
          localStorage.setItem("record1", this.result);
          break;
        case 2:
          localStorage.setItem("record2", this.result);
          break;
        case 3:
          localStorage.setItem("record3", this.result);
          break;
        case 4:
          localStorage.setItem("record4", this.result);
          break;
        case 5:
          localStorage.setItem("record5", this.result);
          break;
        case 6:
          localStorage.setItem("record6", this.result);
          break;
        case 7:
          localStorage.setItem("record7", this.result);
          break;
        case 8:
          localStorage.setItem("record8", this.result);
          break;
        case 9:
          localStorage.setItem("record9", this.result);
          break;
        case 10:
          localStorage.setItem("record10", this.result);
          break;
        case 11:
          localStorage.setItem("record11", this.result);
          break;
      }
    },
    changeHandle2() {
      this.showTextarea = true;
    },
    keeprecord() {
      this.showTextarea = false;
    },
    blurHandle() {
      switch (this.questionNum) {
        case 1:
          localStorage.setItem("record1", this.textareaValue);
          break;
        case 2:
          localStorage.setItem("record2", this.textareaValue);
          break;
        case 3:
          localStorage.setItem("record3", this.textareaValue);
          break;
        case 4:
          localStorage.setItem("record4", this.textareaValue);
          break;
        case 5:
          localStorage.setItem("record5", this.textareaValue);
          break;
        case 6:
          localStorage.setItem("record6", this.textareaValue);
          break;
        case 7:
          localStorage.setItem("record7", this.textareaValue);
          break;
        case 8:
          localStorage.setItem("record8", this.textareaValue);
          break;
        case 9:
          localStorage.setItem("record9", this.textareaValue);
          break;
        case 10:
          localStorage.setItem("record10", this.textareaValue);
          break;
        case 11:
          localStorage.setItem("record10", this.textareaValue);
          break;
      }
    },
    classType() {
      switch (this.radio) {
        case "1":
          this.result = "正确";
          this.$emit("getScoreState", this.result);
          break;
        case "2":
          this.result = "错误";
          break;
        case "3":
          this.result = "部分错误";
          this.showTextarea = true;
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.radio {
  margin-bottom: 10px;
}
textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  width: 97%;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 14px;
  resize: vertical; /* 允许垂直拉伸 */
  outline: none;
}
.shadowErea {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 111;
  background: rgba($color: #dfdede, $alpha: 0.8);
  textarea {
    position: relative;
    left: 50%;
    top: 30%;
    background-color: #ffffff;
    transform: translate(-50%, -30%);
  }
  .ready {
    color: #000000;
    position: relative;
    top: 30%;
    font-size: 25px;
    width: 300px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
  }
}
</style>
